"use client"

import { useRef, ReactNode } from "react";
import { useInView } from "motion/react";

interface AnimateViewCheckProps {
    children: Readonly<ReactNode>;
    containerHeightClassName: string;
}

export function AnimateViewCheck({ children, containerHeightClassName }: AnimateViewCheckProps) {

    const ref = useRef(null);
    const isInView = useInView(ref);

    return (
        <div className={ containerHeightClassName } ref={ ref }>
            { isInView && children }
        </div>
    )
}